<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/20
  Time: 10:44
  To change this template use File | Settings | File Templates.
--%>
<%--引入jstl--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>班级菜单</title>
    <!--使用Bootstrap-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <!--引入js-->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<style>
    /*奇数行表格颜色*/
    .table-striped>tbody>tr:nth-child(odd)>td{
        background-color: #D9EDF7;
    }
    /*偶数行表格颜色*/
    .table-striped>tbody>tr:nth-child(even)>td{
        background-color: #FCF8E3;
    }
</style>
<body style="padding:10px">
    <h1>班级管理</h1>
    <%--功能块--%>
    <div>
        <%--退出按钮--%>
        <a href="#" id = "returnStudents">
            <button class="btn btn-danger">退出</button>
        </a>
        <%--返回主页的按钮,点击时调用main()函数--%>
        <a herf="#" id = "returnMain">
            <button class="btn btn-success">主页</button>
        </a>
        <%--新增班级的按钮，点击时跳转到新增班级页面--%>
        <a href="addClasses.jsp">
            <button class="btn btn-primary">创建班级</button>
        </a>
        <%--查找班级的按钮--%>
        <a herf="#" id = "checkButton">
            <button class="btn btn-primary">查找</button>
        </a>
        <%--查找输入框--%>
        <input type="text" id="checkClassName" placeholder="请输入需要查找的班级名称...">
    </div>

    <%--表格块--%>
    <div>
        <!--添加基本样式表格-->
        <table class="table table-striped">

            <!--标题行，即字段-->
            <thead>
            <tr>
                <th>班级编号</th>
                <th>班级名称</th>
                <th>年级</th>
                <th>班主任名称</th>
                <th>班级口号</th>
                <th>人数</th>
            </tr>
            </thead>
            <tbody>
                <%--得到服务器共享的需要显示的班级信息集合，利用foreach循环打印表格--%>
                <c:forEach var="cs" items="${sessionScope.showClasses}">
                    <tr>
                        <td>${cs.cid}</td>
                        <td>${cs.class_name}</td>
                        <td>${cs.grade}</td>
                        <td>${cs.teacher}</td>
                        <td>${cs.watchword}</td>
                        <td>${cs.sum}</td>
                        <td><a href="#" class="set">修改</a></td>
                        <td><a href="#" class="delete">删除</a></td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>

    <!--分页组件-->
    <div style="text-align:center">
        <ul class="pagination">
            <%--上一页按钮--%>
            <%--通过三目运算符改变按钮状态，是否可用--%>
            <%--<li class= <%= pageContrl.backOK()?"":"disabled" %>>--%>
            <li class= ${sessionScope.classesPageContrl.backOK()?"":"disabled"}>
                <a href="#" id="back"> BACK <span class="glyphicon glyphicon-chevron-left"></span></a>
            </li>
            <%--下一页按钮--%>
            <%--通过三目运算符改变按钮状态，是否可用--%>
            <%--<li class= <%= pageContrl.nextOK()?"":"disabled" %>>--%>
            <li class= ${sessionScope.classesPageContrl.nextOK()?"":"disabled"}>
                <a href="#" id="next"> NEXT <span class="glyphicon glyphicon-chevron-right"></span></a>
            </li>
        </ul>
    </div>
</body>
<script>

    //点击退出时调用这个方法，跳转到ShowServlet，再回到学员管理系统
    jQuery(`#returnStudents`).click(function () {
        //拼接url
        var url = "show?";
        //设置显示第一条学员信息
        url += "start=" + 0;
        //重新定位url
        location = url;
    });


    //主页按钮功能,绑定点击事件
    jQuery(`#returnMain`).click(function () {
        //拼接url
        var url = "showClasses?";
        //设置显示第一条班级信息
        url += "start=" + 0;
        //重新定位url
        location = url;
    });

    //发送上一页请求到ShowServlet
    jQuery(`#back`).click(function () {
        //调用PageContrl类的方法，判断是否有上一页
        if(${sessionScope.classesPageContrl.backOK()}){// pageContrl.backOK()
            //拼接url
            var url = "showClasses?";
            //计算上一页的开头学员信息并设置为start的值
            url += "start=" + (${sessionScope.classesPageContrl.getStart() - sessionScope.classesPageContrl.getPageShow()});
            //重新定位url
            location = url;
        }
    });

    //发送下一页请求到ShowServlet
    jQuery(`#next`).click(function () {
        //调用PageContrl类的方法，判断是否有下页
        if(${sessionScope.classesPageContrl.nextOK()}){
            //拼接url
            var url = "showClasses?";
            //计算下一页的开头学员信息并设置为start的值
            url += "start=" + (${sessionScope.classesPageContrl.getStart() + sessionScope.classesPageContrl.getPageShow()});
            //重新定位url
            location = url;
        }
    });

    //修改班级信息按钮
    jQuery(`.set`).click(function () {
        //得到目标行的班级信息
        var cid = jQuery(this).parents(`tr`).children().eq(0).text();
        var className = jQuery(this).parents(`tr`).children().eq(1).text();
        var grade = jQuery(this).parents(`tr`).children().eq(2).text();
        var teacher = jQuery(this).parents(`tr`).children().eq(3).text();
        var watchword = jQuery(this).parents(`tr`).children().eq(4).text();

        //拼接url
        var url = "setClasses.jsp?";
        url += "setCid="+cid+"&setClassName="+className+"&setGrade="+grade+"&setTeacher="+teacher+"&setWatchword="+watchword;
        //重新定位url
        location = url;
    });

    //发送删除请求
    jQuery(`.delete`).click(function () {
        //得到目标行的班级编号
        var delCid = jQuery(this).parents(`tr`).children().first().text();
        //得到目标行的班级人数
        var sum = jQuery(this).parents(`tr`).children().eq(5).text();
        //判断指定班级的人数是否为0，若不为0则不能删除
        if(sum != 0){
            alert("无法删除有学员的班级")
        }else {
            //拼接url
            var url = "delClasses?";
            url += "delCid="+delCid;
            //重新定位url
            location = url;
        }
    });

    //查找按钮
    jQuery(`#checkButton`).click(function () {
        //得到输入框的值
        var checkClassName = jQuery(`#checkClassName`).val();
        if(checkClassName != ""){
            //拼接url
            var url = "checkClasses?";
            url += "checkClassName=" + checkClassName;
            //重新定位url
            location = url;
        }
    });
</script>
</html>
